<template>
  <div class="searchView">
    <div class="searchTop">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div class="searchHot dw">
    <span class="sc" @click="getsc"></span>
      <p>搜素记录</p>
      <ul class="clearfix">
        <li
          v-for="(item, index) in collectionData"
          :key="index"
          @click="searchCont(item)"
        >
          <p>{{item}}</p>
        </li>
      </ul>
    </div>
    <div class="searchHot">
      <p>热门搜索</p>
      <ul class="clearfix">
        <li
          v-for="(item, index) in classicData"
          :key="index"
          @click="searchCont(item.name)"
        >
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      collectionData:null,
      classicData: [
        {
          name: "外套",
        },
        {
          name: "卫衣",
        },
        {
          name: "西装",
        },
        {
          name: "马丁靴",
        },
        {
          name: "穿搭",
        },
        {
          name: "牛仔裤",
        },
        {
          name: "休闲裤",
        },
        {
          name: "工装裤",
        },
        {
          name: "夹克",
        },
        {
          name: "束脚裤",
        },
        {
          name: "休闲鞋",
        },
      ],
    };
  },
  created() {
    if (window.localStorage.getItem("search") == null) {
      window.localStorage.setItem("search", "[]");
    }
      let collection = window.localStorage.getItem("search");
      collection = JSON.parse(collection);
      this.collectionData = collection
  },
  methods: {
    onSearch(val) {
      this.$router.push({ name: "searchClassic", query: { id: val } });
      let collection = window.localStorage.getItem("search"); 
      collection = JSON.parse(collection);
if(collection.length>0){
  collection = collection.filter((item) => {
          return item != val;
        });
}

      collection.push(this.value);
   
      collection = JSON.stringify(collection);
      window.localStorage.setItem("search", collection);
    },
    onCancel() {
      this.$router.go(-1);
    },
    searchCont(item) {
      console.log(item);
      this.$router.push({ name: "searchClassic", query: { id: item } });
    },
    getsc(){
      console.log(111);
              this.collectionData=[]
      let  collection1=[]
      collection1 = JSON.stringify(collection1);
      window.localStorage.setItem("search", collection1);
    }
  },
};
</script>

<style lang="scss" scoped>
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.searchView {
  .searchHot {
    width: 80%;
    margin: 40px auto;
    p {
      color: rgb(32, 30, 30);
    }
    ul {
      width: 100%;
      margin-left: 10px;
      margin-top: 10px;
      li {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        p {
          font-size: 13px;
          padding: 8px 13px;
          border-radius: 5px;
          background-color: #f1f1f1;
          color: rgb(112, 105, 105);
        }
      }
    }
  }
}
.dw{
  position: relative;
}
.sc{
  display: block;
  width: 20px;
  height: 20px;
position: absolute;
background:url('../../public/assets/images/ljt.png');
background-size: 100% 100%;
right: -10px;
top: 0px;
}
</style>